<template>
    <div>
        <!--    面包屑+新增按钮+批量删除按钮+搜索框和按钮-->
        <div style="height: 30px">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><a href="/">题库管理</a></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin: 10px">
            <el-button @click="dialogFormVisible = true" type="primary">新建题库</el-button>
        </div>
        <el-row>
            <el-col :span="4" v-for="(item,index) in library" :key="index">
                <div style="margin: 10px">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>{{ item.name }}</span>
                        </div>
                        <div class="text item">
                            <span>{{ item.describe }}</span>
                        </div>
                        <div>
                            <!-- 录题与查看题库 -->
                            <el-button @click="topic(item.id)" style="margin-left: 10px" size="mini" type="primary">录题</el-button>
                            <el-button @click="look(item.id)" size="mini" type="primary">查看</el-button>
                            <el-popconfirm @confirm="deleteLid(item.id)" title="确定删除吗？">
                                <el-button size="mini" type="primary" style="margin-left: 10px" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <!-- 新建题库对话框 -->
        <div>
            <el-dialog title="新建题库" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="题库名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="题库描述" :label-width="formLabelWidth">
                        <el-input v-model="form.describe" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    name: "libraryManage",
    data() {
        return {
            library: [
                {
                    id:0,
                    name:'',
                    describe:''
                }
            ],
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                name: '',
                describe: ''
            },
            formLabelWidth: '120px'
        };
    },

    mounted(){
        this.getLibrary();
    },
    methods:{
        async getLibrary(){
            let res =await this.$API.getLibraryList();
            this.library = res.data;
            console.log(res);
        },
        async submit(){
            let res = await this.$API.insertLibrary(this.form);
            this.dialogFormVisible = false;
            this.form.name = '';
            this.form.describe = '';
            if(res.code == 0 || res.code== '0'){
                this.$message({
                    message: '新增成功',
                    type: 'success'
                });
            }else {
                this.$message.error('新增失败');
            }
            this.getLibrary();
        },
        topic(id){
            //console.log(id);
            this.$router.push({path:'/index/topic',query:{id}});
        },
        look(id){
            console.log(id);
            this.$router.push({path:'/index/questionManage',query:{id}});
        },
        async deleteLid(id){
            let res = await this.$API.deleteLibrary(id);
            if(res.code == 0 || res.code== '0'){
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
            }else {
                this.$message.error('删除失败');
            }
            //console.log(res);
            this.getLibrary();
        },
    },
};
</script>

<style>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

.box-card {
    width: 250px;
}
</style>